<script lang="ts">
import { defineComponent, onMounted,onUnmounted, ref,watch } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { getUserAlbum } from '../api/User'
import { getimage } from '../hooks/image'
import { filters } from '../hooks/filters'
import { useScroll } from '../hooks/useScroll'


export default defineComponent({
  props:['useractive'],

  setup(props) {
    let router = useRouter()
    let route = useRoute()
    let albumList: any = ref([])
    //用户id
    let userid: any = route.query.userid;
    let useractive = props.useractive;
    console.log('22222222', userid)
    let click_ablum: any = (id:number,user_id:number): any => {
      router.push({
        path: '/albumDes',
        query: {
          id,
          user_id,
          useractive
        }
      })
    }

    let page: number = 1;
    let order: any = ref('default');
    let scrollTop = ref<number>(document.documentElement.scrollTop);
    let isbottom = ref(false);
    let isloading: any = ref(false);
    let total: any = ref();

    //获取用户专辑数据
    let getUserAlbumFun = (userid: any, page: number) => {
      getUserAlbum(userid, {
        page
      }).then((data) => {
        console.log('用户专辑数据data=>', data)
        total.value = data.data.total;
        data.data.list.forEach((item: any) => {
          albumList.value.push( item)
        })
        // albumList.value = data.data.list
        console.log('用户专辑数据albumList=>', albumList.value)
      })
    }
    let onscroll = () => {
      scrollTop.value = document.documentElement.scrollTop;
      isbottom.value = useScroll(document.documentElement).scrollListenerHandler();
      console.log('9999999999999', isbottom.value)
    }
    watch(isbottom, () => {
      if (page * 10 >= total.value) {
        return;
      }
      if (isbottom.value) {
        page += 1;
        isloading.value = true;
        console.log('222222222page=>', page);

        console.log('isloading', isloading.value);
        setTimeout(() => {
          isloading.value = false;
          console.log('222222222page=>', page);
          getUserAlbumFun(userid, page);
        }, 1000)

      }

    })
    onMounted(() => {
      getUserAlbumFun(userid, 1);
      window.addEventListener('scroll', onscroll);
    });
    onUnmounted(() => {
      window.removeEventListener('scroll', onscroll)
    })
    return {
      click_ablum,
      albumList,
      getimage,
      filters,
      isloading,
      total
    }
  }
})
</script>
<template>
  <div class="album" v-if="albumList">
    <p v-if="total == 0">还没有创建专辑</p>
    <div class="albumList" v-else>
      <ul>
        <!-- 专辑列表 -->
        <li @click="click_ablum(item.id,item.user_id)" v-for="(item, index) in albumList" :key="index">
          <div class="albumimg">
            <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
            <img :src="getimage(item.cover_url)+'?param=5y5'" alt="" />
            <div class="float">
              <div class="whitebox-one"></div>
              <div class="whitebox-two"></div>
            </div>
          </div>
          <!-- 专辑名字 -->
          <div class="albumname">{{ item.title }}</div>
          <!-- 专辑浏览量 -->
          <div class="albumcount">
            作品 {{ filters(item.count.count_article) }} <span>·</span> 浏览
            {{ filters(item.count.count_viewed) }}<span>·</span> 赞
            {{ filters(item.count.count_liked) }}
          </div>
        </li>
      </ul>
      <van-loading size="24px" v-if="albumList.length!=total&&isloading" style="text-align: center;">加载中...</van-loading>
      <em style="text-align: center;font-size: 14px;background-color:#fff;line-height:40px;color: #a5a5a5;" v-if="albumList.length==total">暂无更多了~</em>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.album {
  background-color: #f7f7f7;
  p {
    font-size: 14px;
    width: 100%;
    height: 302px;
    line-height: 302px;
    text-align: center;
    color: #bbbbbb;
  }
}
.albumList {
  ul {
    padding-top: 7px;
    background-color: #f7f7f7;
    li {
      height: 285px;
      background-color: #fff;
      margin-bottom: 7px;
      padding: 0 11px;
      padding-top: 16px;
      .albumimg {
        position: relative;
        img {
          width: 355px;
          height: 198px;
          border-radius: 5px;
        }
        .float {
          .whitebox-one {
            height: 10px;
            width: 15px;
            background-color: #fff;
            position: absolute;
            top: 10px;
            right: 10px;
            border: 0.5px solid #484b51;
            z-index: 2;
          }
          .whitebox-two {
            height: 10px;
            width: 15px;
            background-color: #fff;
            position: absolute;
            top: 14px;
            right: 6px;
            border: 0.5px solid #484b51;
          }
        }
      }
      .albumname {
        margin-top: 8px;
        line-height: 28px;
        font-size: 14px;
        font-weight: 600;
        color: #2c2c2c;
      }
      .albumcount {
        line-height: 25px;
        font-size: 12px;
        color: #bbbbbb;
        span {
          margin: 0 10px;
          font-weight: 600;
        }
      }
    }
  }
  em {
    display: inline-block;
    width:100%;
    font-size: 14px;
    color: #bbbbbb;
    text-align: center;
    line-height: 40px;
  }
}
</style>